<template>
  <div class="statement">
    <ol>
      <li>duration:0时不自动关闭,默认时间为 element-plus 配置时间</li>
      <li>提type示类型：success、warning、message、error</li>
    </ol>
  </div>
  <div>
    <el-button plain @click="open1"> 自动延时关闭 </el-button>
    <el-button plain @click="open2"> 不自动关闭 </el-button>
    <el-button plain @click="openHTMLType()"> 使用了html字符串 </el-button>
    <el-button plain @click="openType('Success')"> Success </el-button>
    <el-button plain @click="openType('Warning')"> Warning </el-button>
    <el-button plain @click="openType('Info')"> Info </el-button>
    <el-button plain @click="openType('Error')"> Error </el-button>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ notthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
      
    <script lang="ts" setup>
import { h, ref, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { demoProps } from "@/stores/modules/merakDemo";

import Prism from "prismjs";
import "../../prism.css";

import dropWrap from "../../dropWrap.vue";
/* 响应式变量 */

const demoProp = demoProps();

//变量 htm 用于存放 组件源码 code
let notthtm = ref<string>(`
    ElNotification({
        title: 'Title',
        message: h('i', { style: 'color: teal' }, '我是用Vnode创建的结构'),
    });

    ElNotification({
        title: 'Title',
        message:'这里是一个纯字符串,并且不会自动关闭',
        duration:0
    });

    ElNotification({
        title: "Title",
        message: \`这里是一个纯字符串,并且不会自动关闭,提示类型：\${type}\`,
        // duration: 0,
        type:"success"
     });

     ElNotification({
        title: "Title",
        dangerouslyUseHTMLString: true,
        message: \`<h3>这里是一个HTML字符串,并且不会自动关闭,需要使用 dangerouslyUseHTMLString: true</h3>\`,
        duration: 0
     });

  
      `);

/* 
      生命周期
      */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});

/* methods */

const open1 = () => {
  ElNotification({
    title: "Title",
    message: h("i", { style: "color: teal" }, "我是用Vnode创建的结构")
  });
};
const open2 = () => {
  ElNotification({
    title: "Title",
    message: "这里是一个纯字符串,并且不会自动关闭",
    duration: 0
  });
};
const openType = (type) => {
  ElNotification({
    title: "Title",
    message: `这里是一个纯字符串,并且不会自动关闭,提示类型：${type}`,
    duration: 0,
    type:type.toLowerCase()

  });
};
const openHTMLType = (type) => {
  ElNotification({
    title: "Title",
    dangerouslyUseHTMLString: true,
    message: `<h3>这里是一个纯字符串,并且不会自动关闭,提示类型：${type}</h3>`,
    duration: 0,
    
  });
};
</script>
      <style lang="scss" scoped>
.el-row::v-deep {
  margin-bottom: 20px;
}
.el-alert {
  margin-bottom: 20px;
}
</style>
      